<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      body {
          overflow: hidden;
      }
      .remote{
          text-align: center;
      }
      @-webkit-keyframes rotation{

          from {-webkit-transform: rotate(0deg);}

          to {-webkit-transform: rotate(360deg);}

      }
      .an{

          -webkit-transform: rotate(360deg);

          animation: rotation 1s linear infinite;

          -moz-animation: rotation 1s linear infinite;

          -webkit-animation: rotation 1s linear infinite;

          -o-animation: rotation 1s linear infinite;

      }
  </style>
  <script>
    const status = {width:2048,height:1034}
    const tops = [511,511,511,511,511,511,511,511,511,511,511,511,511,511,511,511,511,511,511,511,511,511,511,]
    const lefts = [110,172,234,313,374,503,565,626,725,786,848,934,995,1057,1119,1567,1629,1691,1753,1859,1921]
    const widthBl = document.documentElement.clientWidth/status.width
    const heightBl = document.documentElement.clientHeight/status.height
    window.onload = function () {
      const width = document.documentElement.clientWidth;
      const height = document.documentElement.clientHeight;
      const bac = document.getElementById('bac')
      bac.style.width = width + 'px';
      bac.style.height = height + 'px';
      bac.addEventListener('click', function (e) {
        console.log(`left:${e.offsetX-5}`)
        console.log(`top:${e.offsetY-12}`)
      })
      lefts.forEach((left,index)=>{
        const div = document.createElement('div')
        div.className= 'remote'
        const img = document.createElement('img')
        img.src = 's.png';
        img.style.position = 'absolute';
        img.style.left = `${left*widthBl+(1-widthBl)*8}px`;
        img.style.top = `${tops[index]*heightBl+(1-heightBl)*8}px`;
        img.style.width = `${27*widthBl}px`
        img.className= 'an'
        div.appendChild(img)
        document.body.appendChild(div)
      })
    }
  </script>
</head>
<body>
<img src="bac.png" id="bac">
</body>
</html>
